/* eslint-disable @typescript-eslint/ban-ts-comment */
import React, { useEffect, useState } from 'react';
import { View, Text } from '@ray-js/ray';
import { Checkbox, Tag } from '@ray-js/smart-ui';
import Strings from '@/i18n';
import { useSwitchInfo } from '@/hooks/useSwitchInfo';
import { useWaterControlInfo, GroupedSwitchInfo } from '@/hooks/useWaterControlInfo';
const cx = (x: number) => `${x * 2}rpx`;

const styles = {
  container: {
    display: 'flex',
    flex: 1,
    height: '80vh',
    borderTopLeftRadius: cx(24),
    borderTopRightRadius: cx(24),
    overflow: 'hidden',
    position: 'relative',
  },
  saveBtn: {
    position: 'fixed',
    display: 'flex',
    width: cx(343),
    height: cx(48),
    borderRadius: cx(24),
    justifyContent: 'center',
    alignItems: 'center',
    marginInline: cx(16),
    bottom: `calc((env(safe-area-inset-bottom) / 2) + ${cx(20)})`,
    backgroundColor: '#4a99bc',
    zIndex: 40,
  },
  option: {
    backgroundColor: '#fff',
    marginInline: cx(24),
    height: cx(40),
    paddingBlock: cx(3),
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingRight: cx(50),
    width: cx(310),
  },
  hide: {
    opacity: 0.5,
    display: 'none',
  },
};

const AreaSet = (props: { value: number; setValue: (a: any) => void }) => {
  const group = useWaterControlInfo();

  let dpsInfo: (GroupedSwitchInfo['water'] | GroupedSwitchInfo['drug'])[] = [];

  group.forEach(item => {
    dpsInfo = [...dpsInfo, item.water, item.drug];
  });

  const { value, setValue } = props || {};

  const [diy, setDiy] = useState<number>(value);

  const handlerSave = () => {
    setValue(diy);
  };

  return (
    <View style={styles.container}>
      <View>
        <Text
          style={{
            marginBlock: cx(20),
            marginInline: cx(5),
            color: '#aaa',
            fontSize: cx(12),
            marginLeft: cx(20),
          }}
        >
          {Strings.getLang('diyAreaTip')}
        </Text>
        <View>
          {dpsInfo.map((item, index) => {
            return (
              <View
                style={{
                  ...styles.option,
                  ...(item?.hide ? styles.hide : {}),
                  ...(item?.isOffLine ? styles.hide : {}),
                }}
                key={item.dpId}
              >
                <Checkbox
                  value={+diy === index}
                  onChange={value => {
                    setDiy(index);
                  }}
                  disabled={item.hide || item.isOffLine}
                >
                  <Text style={{ marginLeft: cx(8), color: '#000' }}>{item?.name}</Text>
                </Checkbox>

                {item.hide ? <Tag type="danger">已删除</Tag> : <View />}
              </View>
            );
          })}
        </View>
      </View>

      <View style={styles.saveBtn} onClick={handlerSave}>
        <Text
          style={{
            color: '#fff',
            fontSize: cx(16),
          }}
        >
          {Strings.getLang('save')}
        </Text>
      </View>
    </View>
  );
};

export default AreaSet;
